<template>
  <div class="login-view">
    <h1>登&nbsp;录</h1>
    <div class="new-user ng-binding">
      没有账号吗？
      <a class="signup-link ng-binding" @click="register">注册</a>
    </div>
    <div class="signin-section">
      <div class="signin-with-account">
        <p>账户名<span class="require">{{usernameEmpty?'（请输入账户名）':''}}</span></p>
        <input type="text" :class="{error:usernameEmpty}" v-model="username"/>
        <p>密码<span class="require">{{passwordEmpty?'（请输入密码）':''}}</span></p>
        <input type="password" :class="{error:passwordEmpty}" v-model="password"/>
        <p class="align-right">忘记密码？</p>
        <button class="btn btn-lg btn-primary" @click="checkLogin">登&nbsp;&nbsp;录</button>
      </div>
    </div>
    <div class="footer">
      <p>系统版本5.0</p>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import request from "Utils/request";
import { cmx, library } from "Utils/cosmix";
import store from "Utils/store";
export default {
  name: "Login",
  data() {
    return {
      username: "",
      usernameEmpty: false,
      password: "",
      passwordEmpty: false
    };
  },
  methods: {
    register() {},
    checkLogin() {
      var _this = this;
      if (library.isEmpty(this.username)) {
        this.usernameEmpty = true;
        return;
      }
      this.usernameEmpty = false;
      if (library.isEmpty(this.password)) {
        this.passwordEmpty = true;
        return;
      }
      this.passwordEmpty = false;

      request
        .get(cmx.apis.clientgetaccesstoken(), {
          params: {
            username: this.username,
            password: this.password,
            appkey: store.appkey,
            workspace: store.workspace
          }
        })
        .then(function(response) {
          console.log(response);
          var result = response.data.data;
          cmx.setAccesstoken(result.token);
          cmx.setOpenid(result.id);
          $message.success("登录成功！");
          setTimeout(() => {
            _this.$router.push({
              path: "/Page1",
              query: {
                ip: _this.ip
              }
            });
          }, 1500);
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  },
  created() {
    cmx.init(
      {
        appkey: store.appkey,
        redirecturi: location.href,
        locationLoginUrl: store.locationLoginUrl
      },
      {
        callError(msg) {
          $message.error(msg);
        }
      }
    );
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1 {
  color: #20303c;
  font-weight: lighter;
  font-size: 54px;
  margin: 3vh 0;
}
p {
  font-weight: lighter;
  font-size: 14px;
}
.new-user {
  font-size: 20px;
  font-weight: lighter;
}
.new-user a {
  color: #409eff;
}
.signin-section {
  margin: 4vw 5vw;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.signin-with-account {
  width: 40vw;
  text-align: left;
  margin: auto;
}
.signin-with-account input {
  border: none;
  border-bottom: solid 1px #dcdfe6;
  width: calc(100% - 10px);
  padding: 10px 5px;
  font-size: 20px;
  font-weight: lighter;
  color: #606266;
}
.signin-with-account input.error {
  border-bottom: solid 1px #f56c6c;
}
.signin-with-account input:focus {
  border-bottom: solid 1px #409eff;
}
.signin-with-account .btn {
  background: #409eff;
  color: #fff;
  width: 100%;
}
.footer p {
  margin: 0;
}
@media (max-width: 768px) {
  h1 {
    margin-top: 5vh;
  }
  .signin-with-qr {
    display: none;
  }
  .divider {
    display: none;
  }
  .signin-with-account {
    width: 100%;
  }
  .signin-with-account .btn-lg {
    width: 100%;
  }
}
</style>
